<template>
  <div class="AListOfUsers">

    <div class="text">单位人员信息</div>

    <div>
      <el-card>
        <div class="block">
          <span class="demonstration1">部门：</span>
          <el-cascader
            v-model="values"
            :show-all-levels="false"
            :props="{ checkStrictly: true }"
            :options="options"
            class="cascader"
            @change="handleChange"
          />
          <el-button
            type="primary"
            size="medium"
            @click="dVisible = true"
          >部门管理</el-button>

          <span class="demonstration">角色：</span>
          <el-select
            v-model="page.value"
            filterable
            placeholder="请选择"
            class="option"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" size="medium">权限管理</el-button>
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="isButton"
            @click="dialogVi()"
          >添加成员</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%" border height="50vh">
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column prop="date" label="头像">
            <template #default="{row}">
              <img class="isImgs" :src="row.img" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="address" label="部门">
            <div>山西部门</div>
          </el-table-column>
          <el-table-column prop="address1" label="角色">
            <div>测试员</div>
          </el-table-column>
          <el-table-column prop="address2" label="操作" width="100">
            <template slot-scope="{ row }">
              <el-link type="primary">修改</el-link>
              <el-link type="danger" @click="romdata(row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            :current-page.sync="page.page"
            :page-list-rows.sync="page.listRows"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleChange"
            @current-change="handleChange"
          />
        </el-row>
      </el-card>
    </div>

    <!-- <el-button type="text" @click="dialogVisible = true" /> -->
    <AListo
      ref="roleDialog"
      :role-dialog-visible.sync="dialogVisible"
      :information="information"
    />
    <!-- 部门管理 -->
    <Department :role-dialog.sync="dVisible" />
  </div>
</template>

<script>
import { getEmployeeListAPI, peoplesAPI } from '@/api/AListOfUsers'
import AListo from './components/AListo.vue'
import Department from './components/Department.vue'
export default {
  components: {
    AListo,
    Department
  },
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      information: true, // 控制录入修改表格
      page: {
        page: 1,
        listRows: 10,
        value: '', // 角色
        site_id: 1 // 部门id
      },
      values: [],
      // 级联选择器 假数据
      options: [
        {
          id: 1,
          value: '山西省林业和草原有害生物检疫站',
          label: '山西省林业和草原有害生物检疫站',
          children: [
            {
              id: 4,
              value: '太原市检疫站',
              label: '太原市检疫站',
              children: [
                {
                  id: 9,
                  value: '小店区',
                  label: '小店区'
                },
                {
                  id: 10,
                  value: '小河区',
                  label: '小河区'
                }
              ]
            }
          ]
        }
      ],
      // 人员列表数据
      tableData: [],
      // 角色搜索数据
      options1: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      // 人员总数
      total: 0,
      dialogVisible: false,
      dVisible: false
    }
  },
  watch: {
    values: {
      handler() {
        console.log(this.values)
      }
    }
  },
  created() {
    this.getEmployeeList()
    this.handleChange()
  },
  methods: {
    async handleChange() {
      try {
        const res = await peoplesAPI(this.page)
        this.tableData = res.data
        this.total = res.count
        this.tableData.forEach(item => {
          if (item.avatar.indexOf('data:') !== -1 && item.avatar.indexOf('base64') !== -1) {
            item.img = item.avatar
          } else {
            item.img = `http://forest.kmdsoft.net/storage/${item.avatar}`
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    //  列表
    async getEmployeeList() {
      try {
        const { data } = await getEmployeeListAPI(this.page)
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 修改
    // adddata(row) {
    //   this.dialogVisible = true
    //   this.information = false
    //   this.$refs.roleDialog.ruleForm = { ...row }
    // },
    // 删除
    romdata() {},
    // 添加新成员
    dialogVi() {
      this.information = true
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.AListOfUsers {
  width: 100%;
  // height: 100;
  background-color: #f5f5f5;
  padding: 15px 25px;
  .headers {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    .headers-left {
      font-weight: 700;
      font-size: 18px;
    }
  }
  .block {
    background-color: #fff;
    padding: 5px 30px;
    .cascader {
      margin-right: 20px;
    }
    .demonstration {
      margin-left: 100px;
    }
  }
  .option {
    margin-right: 20px;
  }
}
.text {
  height: 50px;
  font-size: 20px;
  color: #888;
  font-weight: 500;
  font-size: 22px;
  line-height: 50px;
  margin-left: 20px;
}
.isButton{
  float: right;
  margin-right: 20px;
}
.el-table {
  margin-top: 10px;
}
.isImgs{
  width: 35px;
  height: 35px;
  border-radius: 35px;
}
.el-link {
  margin-right: 10px;
}
</style>
